<template>
	<div
		class="category-selector-com px-5 flex items-center bg-white rounded-3xl py-1 shadow-md border">
		<div
			@click="selectAll"
			class="category-name font-bold text-blue-600 flex items-center cursor-pointer">
			<span class="text-sm">{{ categories.name }}</span>
		</div>
		<div class="sub-category-container">
			<el-scrollbar ref="elScrollbar" noresize>
				<div
					class="sub-category flex items-center ml-3 relative text-sm text-gray-500 whitespace-nowrap">
					<div
						:key="item.value"
						@click="selectSubCategory($event, index)"
						v-for="(item, index) in categories.subCategories"
						class="sub-category-item mx-1 hover:text-blue-500 z-10 cursor-pointer px-3 py-1"
						:class="currentActive === index ? 'text-white hover:text-white' : ''">
						{{ item.name }}
					</div>
					<div
						class="slider bg-blue-500 absolute z-0 rounded-2xl"
						:style="{ left: sliderLeft + 'px' }">
						<div class="" :style="{ width: sliderWidth + 'px', height: sliderHeight + 'px' }"></div>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script lang="ts">
import type { ScrollbarInstance } from 'element-plus';

export type CategorySelector = {
	name: string;
	value: string;
	subCategories: {
		name: string;
		value: string;
	}[];
};

export default defineComponent({
	name: 'CategorySelector',
	props: {
		categories: {
			type: Object as PropType<CategorySelector>,
			required: true,
		},
	},
	emits: ['onActiveChange'],
	setup(props, { emit }) {
		// 当前激活的子类别
		const currentActive = ref<number | null>(null);
		watch(currentActive, (val: number | null) => {
			if (val === null) {
				sliderLeft.value = 0;
				sliderWidth.value = 0;
				sliderHeight.value = 0;
				emit('onActiveChange', null);
				return;
			}
			emit('onActiveChange', {
				main: { name: props.categories.name, value: props.categories.value },
				sub: props.categories.subCategories[val],
			});
		});

		// Slider 相关变量
		const sliderLeft = ref<number>(0);
		const sliderWidth = ref<number>(0);
		const sliderHeight = ref<number>(0);

		// el-scrollbar 相关
		const elScrollbar = useTemplateRef<ScrollbarInstance>('elScrollbar');

		// 选择子类别
		const selectSubCategory = (event: MouseEvent, index: number): void => {
			const target = event.target as HTMLElement;
			// 设置滑块宽高/位置
			sliderHeight.value = target.clientHeight;
			sliderWidth.value = target.clientWidth;
			sliderLeft.value = target.offsetLeft;
			elScrollbar.value?.setScrollLeft(target.offsetLeft + target.clientWidth / 2 - 150); // 同步滚动条位置
			currentActive.value = index;
		};

		// 选择所有
		const selectAll = (): void => {
			currentActive.value = null;
			elScrollbar.value?.setScrollLeft(0);
		};

		return {
			sliderLeft,
			sliderWidth,
			sliderHeight,
			currentActive,
			selectAll,
			selectSubCategory,
		};
	},
});
</script>

<style lang="scss" scoped>
.sub-category-container {
	width: 358px;
}

:deep(.el-scrollbar__bar.is-horizontal) {
	z-index: 50;
}

@media (max-width: 768px) {
	.sub-category-container {
		width: 170px;
	}
}
</style>
